<template>
    <div>
        <!-- 购物车  -->
        <table>
            <tr>
                <td>名称</td>
                <td>数量</td>
                <td>价格</td>
            </tr>
            <tr v-for="(item,index) in tlist">
                <td>{{ item.text }}</td>
                <td>
                    <button @click="minus(index)">-</button>
                    <input type="number" v-model="item.num">
                    <button @click="add(index)">+</button>
                </td>
                <td>{{ item.price }}</td>
            </tr>
        </table>
        总数量：{{ totalCount(0) }} 总价格：{{ totalCount(1) }}

        <br/><br/>
        {{counter}}
        <button @click="counter++">点我就加一</button>
        {{ reverse_msg }}
        <ul>
            <li v-for="(item,index) in tlist" :class="{on:index%2==0,off:index%2!=0}">
                {{ item.text }}
            </li>
        </ul>

        <div v-if="type === 'A'">A</div>

        <div v-else-if="type === 'B'">B</div>

        <div v-else> 既不是A 也不是B </div>
        <h2 v-show="ok">Hello World</h2>
        <div v-html="msg"></div>
        {{msg}}
    </div>
</template>

<script>
export default {
    //定义数据
    data(){
        return{
            msg:'<h1>这是个测试<h1>',
            ok:true,
            type:'B',
            tlist:[
                {text:'汽车',num:1,price:10},
                {text:'衣服',num:1,price:15},
                {text:'化妆品',num:1,price:12},
                {text:'牛奶',num:1,price:5}
                ],
            counter:0
        }
    },
    watch: {
        counter:function(nval,oval){
            consle.log('计数器由'+oval+'变换成新的'+nval);
        }
    },
    //计算属性
    computed: {
        //反转
        reverse_msg:function(){
            console.log(this.msg.split(''));
            return this.msg.split('').reverse().join('');
        }
    },
    //钩子方法
    mounted:function() {
        
    },
    //自定义方法
    methods: {
        //汇总数量
        totalCount:function(type){
            //默认数量
            let total = 0;
            //默认价格
            let totalprice = 0;
            //遍历
            for(let i=0,l=this.tlist.length;i<l;i++){
                //总数量累加
                total += parseInt(this.tlist[i].num);
                //总价格相加
                totalprice += (this.tlist[i].num * this.tlist[i].price);
                
            }
            if(type==0){
                return total;
            }else{
                return totalprice;
            }

        },
        //购物车减法
        minus:function(index){
            if(this.tlist[index].num > 0){
                this.tlist[index].num--;
            }
            
        },
        //购物车减法
        add:function(index){
            this.tlist[index].num++;
            
        },
    },
}
</script>

<style>

.on {
    background:rebeccapurple;
    color: wheat;
}
.off{
    background: red;
    color: black;
}

</style>

